<template>
	<view class="wrap">
		<info v-if="isError"></info>
		<view v-if="!isError">
		
			<view class="goods">
				<view class="title">
					<text>共{{order.item.length}}件商品</text>
				</view>
				<view class="goods-box">
					<view
						class="goods-item clear"
						v-for="(value,index) in order.item"
						:key="index"
					>

						<view class="goods-img">
							<image :src="value.thumb_image">
						</view>

						<view class="goods-info">
							<view class="t">
								<text>{{value.title}}</text>
								<text>￥{{value.sell_price}}</text>
							</view>
							<view class="b">
								<text>{{value.spec}}</text>
								<text>× {{value.nums}}</text>
							</view>
						</view>

					</view>

				</view>
			</view>

			<view class="order">
				<view class="list clear">
					<view class="list-box clear">
						<view>商品金额：</view>
						<view>{{order.real_amount}}</view>
					</view>
					<view class="list-box clear">
						<view>运费金额：</view>
						<view>{{order.payable_freight}}</view>
					</view>
					<view class="list-box clear">
						<view>订单总额：</view>
						<view class="money">{{order.order_amount}}</view>
					</view>
				</view>
			</view>

			<form @submit="formSubmit">
				<view class="order">
					<view class="list clear">
						<view class="fields-box">
							<view>归还方式</view>
							<view>
								<picker mode="selector" :range="items1" range-key="title" @change="onPickerChange1">
								  <view class="picker">
									{{ selectedItem1 ? selectedItem1.title : '请选择' }}
								  </view>
								</picker>
							</view>
						</view>
						<view class="fields-box">
							<view>快递公司</view>
							<view>
								<picker mode="selector" :range="items" range-key="title" @change="onPickerChange">
								  <view class="picker">
									{{ selectedItem ? selectedItem.title : '请选择' }}
								  </view>
								</picker>
							</view>
						</view>
						<view class="fields-box">
							<view>快递单号</view>
							<view>
								<input type="text" class="uni-input" name="danhao" :value="danhao" placeholder="请填写快递单号" />
							</view>
						</view>
						
						
						
							<view class="uni-textarea">
								<textarea maxlength="200" style="color: #666;" name="guihuan_remark" :value="guihuan_remark"
								:class="textareaStyle===0?'activeTextCopy':'activeText'" @focus="Taken" @blur="lose"
								placeholder="如有特殊说明,请填写归还备注~" />
							</view>
						
					</view>
					
				</view>
				<view class="btn">
					<button form-type="submit">归还</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import MallInfo from '@/components/tool/info.vue'
	export default {
		components:{
			MallInfo
		},
		data(){
			return {
				isError: false,
				isSubmit: false,
				orderId: 0,
				order:{
					item: [],
					order_amount: "",
					order_no: "",
					payable_freight: '',
					payable_amount: "",
					promotions: "",
					real_amount: ""
				},
				items: [],
				selectedItem: null,
				danhao:'',
				items1: [{'id':1,'title':'自送'},{'id':2,'title':'闪送'},{'id':3,'title':'快递'}],
				selectedItem1: null,
				textareaStyle: 0,
				guihuan_remark:''
			};
		},
		onLoad(options) {
			this.isError = false;
			this.orderId = options.id;
			this.$http.getOrderDeliveryList({
				id: this.orderId
			}).then((res)=>{
				if(res.status){
					this.order = res.data;
					this.items = res.data.freight_list;
				}else{
					this.$utils.msg(res.info);
				}
				
				this.isError = false;
			}).catch((err)=>{
				this.isError = true;
			});
		},
		methods: {
			onPickerChange(e) {
			  const index = e.detail.value;
			  this.selectedItem = this.items[index];
			},
			onPickerChange1(e) {
			  const index = e.detail.value;
			  this.selectedItem1 = this.items1[index];
			},
			lose() {
				this.textareaStyle = 0;
			},
			Taken() {
				this.textareaStyle = 1;
			},
			formSubmit(e){
				let formdata = e.detail.value;
				console.log(formdata);
				if(this.isSubmit){
					return false;
				}
				
				if(!this.selectedItem1){
					this.$utils.msg("请选择归还方式");
					return ;
				}
				if(this.selectedItem1.id==3){
					if(!this.selectedItem){
						this.$utils.msg("请填写快递信息");
						return ;
					}
				}
				
				let params = {
					id: this.orderId,
					guihuan_type: this.selectedItem1.id,
					kuaidi_id: this.selectedItem.id,
					danhao: formdata.danhao,
					guihuan_remark: formdata.guihuan_remark,
				};
				this.$utils.showLoading();
				this.isSubmit = true;
				this.$http.getOrderConfirmGuihuan(params).then(res=>{
					this.$utils.hideLoading();
					if(res.status){
						this.$utils.msg(res.info);
						this.$utils.redirectTo('order/detail',{
							id: this.orderId
						});
					}else{
						this.$utils.msg(res.info);
					}
					
					this.isSubmit = false;
				}).catch(err=>{
					this.$utils.hideLoading();
					this.isSubmit = false;
					this.$utils.msg("网络出错，请检查网络是否连接");
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.money{ color: #fc4141; }
	.goods{
		background-color: #fff;
		margin-top: 30rpx;
		padding-bottom: 20rpx;
		.title{
			width: 100%;
			margin: 0 auto;
			color: #666;
			font-size: 28rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-bottom: 1px solid #eee;
			text {
				padding-left: 20rpx;
			}
		}
		.goods-box{
			padding: 0 30rpx;
			.goods-item {
				padding-top: 10px;
				.goods-img {
					width: 150rpx;
					height: 150rpx;
					display: inline-block;
					float: left;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.goods-info {
					display: inline-block;
					width: 72%;
					font-size: 28rpx;
					float: right;
					.t {
						width: 100%;
						height: 90rpx;
						text:first-child{
							float: left;
							display: -webkit-box;overflow: hidden;-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							width: 70%;
						}
						text:last-child{
							width: 30%;
							float: right;
							text-align: right;
						}
					}
					.b{
						width: 100%;
						height: 80rpx;
						font-size: 26rpx;
						text:first-child{
							float: left;
							color: #999;
						}
						text:last-child{
							float: right;
							color: #666;
						}
					}
				}
			}
		}
	}
	.order{
		background-color: #fff;
		margin-top: 30rpx;
		padding-bottom: 20rpx;
		.list {
			width: 100%;
			.list-box{
				width: 92%;
				height: 80rpx;
				line-height: 80rpx;
				margin: 0 auto;
				font-size: 28rpx; color: #333;
				border-bottom: 1px solid #ebedf0;
				view{ display: inline-block; }
				view:first-child { float: left; }
				view:last-child { float: right; }
			}
		}
		.fields-box{
			width: 92%;
			margin: 0 auto;
			font-size: 31rpx;
			height: 110rpx;
			line-height: 110rpx;
			border: 2rpx solid #e0e0e0;
			border-left: 0;
			border-right: 0;
			&:nth-child(1){
				border-top: 0;
				border-bottom: 0;
			}
			&:nth-child(2){
				border-bottom: 0;
			}
			&:nth-child(3){
				//border-bottom: 0;
			}
			view:first-child {
				float: left;
				width: 160rpx;
				color: #999;
			}
			view:last-child {
				float: right;
				width: 490rpx;
				color: #333;
				input {
					height: 110rpx;
					line-height: 110rpx;
				}
			}
		}
		.uni-textarea{
			margin: 60rpx auto;
			width: 92%;
			color: #ccc;
		}
	}
	.btn{
		width: 90%;
		margin: 40rpx auto;
		margin-top: 40rpx;
		button {
			background-color: #78C0F9;
			border-radius: 30rpx;
			font-size: 28rpx;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
		}
	}
</style>
